<template>
    <div class="root" @scroll="scroll">
        <div class="title"><h1>&nbsp;&nbsp;· 财务数据</h1></div>
        <div class="Line"></div>
        <!-- 顶部金额 -->
        <div class="box">
            <div>
                <p>
                    <span>销售金额</span>
                    <span> (所有)</span>
                </p>
                <p>
                    <span class="one">{{ saleMoney }}</span>
                    <span class="two"> 元</span>
                </p>
            </div>
            <div>
                <p>
                    <span>到账金额</span>
                    <span> (已确认到账)</span>
                </p>
                <p>
                    <span class="one">10000.00</span>
                    <span class="two"> 元</span>
                </p>
            </div>
            <div>
                <p>
                    <span>在库金额</span>
                    <span> (已退款)</span>
                </p>
                <p>
                    <span class="one">10000.00</span>
                    <span class="two"> 元</span>
                </p>
            </div>
            <div class="indexTwo">
                <p>
                    <span>退款金额</span>
                    <span> (已退款)</span>
                </p>
                <p>
                    <span class="one">100000.00</span>
                    <span class="two"> 元</span>
                </p>
            </div>
        </div>
        <!-- 模糊搜索 -->
        <div class="search-box">
            <el-input
                class="search-box"
                placeholder="对商品进行模糊搜索"
                prefix-icon="el-icon-search"
                v-model="searchName"
                clearable
            />
        </div>
        <!-- 数据，表格部分 -->
        <div class="table">
                <el-table
                :data="showTableData"
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="商品名称"
                    width="360">
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="订单数量"
                    width="360">
                </el-table-column>
                <el-table-column
                    label="财务状态">
                        <el-switch
                            v-model="tableData.state"
                            disabled >
                        </el-switch>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        title="无权限,请联系财务部"
                        >删除</el-button>
                    </template>
                </el-table-column>
                </el-table>
        </div>
        <!-- 抽屉组件 -->
        <Drawer v-model="drawer" :commodityData="commodityData"/>
         <!--回收站路由跳转  -->
        <el-button icon="el-icon-delete" class="delete" @click="deletePush"></el-button>
        <!-- 回到顶部按钮 -->
        <el-button icon="el-icon-top" class="backTop" @click="backToTop" ref="top"></el-button>   <!-- 失败，还不能用  o_o  -->

    </div>   
</template>
<script>
import axios from 'axios'
import api from "../../api/index"
import Drawer from '../../src/components/moneyDrawer.vue'
export default {
    name: 'PageTow',
    components: {
        Drawer
    },
    data () {
        return {
            tableData: [],
            searchName: '',
            saleMoney: 0.00,
            state: true,
            stateArray: [],
            drawer: false,
            commodityData: {
                name: '',
                num: 1,
                state: true
            },
            currentIndex: 2
        }
    },
    methods:{
        // 数据请求与更新(查)
        upData() {
            api.money.getMoneyData().then((res) => {
                this.tableData = res.data
                this.showState()
                // console.log('update');
                this.addPrice(res.data)
            })
        },
        // 状态显示与否
        showState() {
            this.tableData.forEach((items) => {
                if (items.state === "false") {
                    this.state = false
                } else {
                    this.state = true
                }
                this.stateArray.push(this.state)
            });
            // console.log(this.stateArray);
            // this.stateArray.forEach(e => {
            //     this.state = e
            // })
        },
        // 状态更改
        handleEdit(index, row) {
            // console.log(index, row);
            // console.log(row);
            this.drawer = true
            this.commodityData = row
        },
        // 数据的删除与回收站数据的添加
        handleDelete(index, row) {
            // this.tableData.splice(index,1)
            // console.log(row);
            this.$confirm("此操作将永久删除该数据, 是否继续?", "警告！", {
                type: "warning",
            }).then(() => {
                axios
                    .delete(`http://localhost:3001/money/${row.id}`)
                    .then((res) => {
                        console.log(res);
                    })
                    .catch((err) => {
                        console.log(err);
                    })
                    .finally(() => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.upData()
                    });
                axios
                    .post(" http://localhost:3001/delData", {
                        name: row.name,
                        num: row.num,
                    })
                this.upData()
            }).catch((err) => {
                console.log(err);
                this.$message({
                    type: "info",
                    message: "已取消删除",
                });
            });
        },
        // 金额响应式计算
        addPrice(data) {
            // console.log(data);
            var priceAll = 0.00
            for (var i = 0; i < data.length; i++){
                priceAll += parseFloat(data[i].num * data[i].price) 
            }
            // console.log(priceAll);
            this.saleMoney = priceAll
        },
        // 回收站路由跳转
        deletePush() {
            this.$router.push("/recovery");
        },
        // 获取滚动高度
        scroll() {
            var top = document.querySelector("body").clientHeight 
            console.log(top);
            if (top > 100) {
                this.$refs.top.style.display = 'block';
            } else {
                this.$refs.top.style.display = 'none';
            }
        },
        // 返回顶部
        backToTop() {
            // this.$message('不想写了。(可怜.jpg) 🙁🙁🙁🙁🙁')
            window.scrollTo({
                top: 20,
                behavior: 'smooth'
            });
        },
        // 获取当前时间
        getNowDate() {
            // var date = new Date();
            // console.log(date);
        }
    },
    computed: {
        // 模糊搜索
        showTableData() {            
            return this.tableData
                .filter((d) => d.name.includes(this.searchName));
        },
        // showIcon() {
        //     return Boolean(this.tableData);

        //     // if (this.searchName) {
        //     //     this.$refs.icon.style.display = "block"
        //     // } else {
        //     //     this.$refs.icon.style.display = "none"
        //     // }
        // }
    },
    created() {
        this.upData()
    }
}
</script>
<style scoped lang="less">
.root {
    .title {
        h1 {
            font-size: 20px;
            line-height: 50px;
            color: #666;
            margin-left: 63px;
            height: 50px;
            width: 1150px;
            background-color: white;
            border-radius: 7px;
        }
    }
    .Line {
        width: 1135px;
        height: 1px;
        background-color: #ccc;
        margin: 20px 0 20px 65px;
    }
    .box {
        width: 90%;
        height: 200px;
        // border: 1px solid #ccc;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        div:hover {
                box-shadow: 5px 5px 20px #ccc;
            }
        div {
            width: 260px;
            height: 170px;
            // border-right: 1px solid #ccc;
            display: flex;
            flex-direction: column;
            // align-items: center;
            justify-content: center;

            background-color: white;
            border-radius: 10px;
            transition: 1s;
            p {
                margin: 15px;
                span:nth-child(2) {
                    font-size: 8px;
                    color: #ccc;
                }
                .one {
                    color: red;
                }
                .two {
                    color: black;
                }
            }
        }

        .indexTwo {
            border: none;
        }
    }
    .search-box {
        width: 1150px;
        margin: 10px auto;
    }
    .table {
        width: 90%;
        margin: 10px auto;
    }
    .delete {
       width: 56px;
       height: 56px;
       border-radius: 50%;
       position: fixed;
       right: 30px;
       bottom: 60px;
       background-color: white;
    }
    .backTop {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        position: fixed;
        right: 30px;
        bottom: 130px;
        background-color: white;
        display: block;
    } 
}
</style>
